<template>
  <div class="app-container">
    <div class="mapDiv" v-loading="loading" :element-loading-text="loadingText">
      <!--地图-->
      <DpaIndexMap v-if="completeRefreshData==true"
                   @getMap="getMap"
                   :resultDialogType="result.resultDialogType"
                   :resultDataList="result.resultDataList"
                   :drawXzqhGeom="countParam.geomText"
                   :resultLegendList="result.resultLegendList"
      ></DpaIndexMap>
      <!--工具条控件-->
      <ControlToolBar v-if="completeRefreshData==true"
                      :map="map" :pageType="pageType" :mapDrawType="mapDrawType"
                      @showPattenAnalysis="showPattenAnalysis"
                      @showImgcreate="showImgcreate"
                      @getAllDrawGeom="getAllDrawGeom"
                      @getClickLonLat="getClickLonLat"
                      :showHideButtonType="showHideButtonType"
      ></ControlToolBar>
      <!--超图图层显示-->
      <SuperMapLayer v-if="completeRefreshData==true"
                     :map="map" :layerDataTypeList="layerDataTypeList"
                     :resetClearAllBool="resetClearAllBool" :geomText="countParam.geomText"
                     :clickLonLat="clickLonLat" :resultLegend="result.resultLegendHtml"
                     @getAllTempLayersSetList="getAllTempLayersSetList"
      ></SuperMapLayer>
      <!-- 规律分析按钮面板 -->
      <div v-show="showPattenAnalysisBool" class="new-pattenAnalysisDiv">
        <!-- 弹窗面板 -->
        <div class="new-popover">
          <div class="new-triangle"></div>
          <!-- 规律分析按钮 -->
          <div class="showPattenAnalysisDiv">
            <div class="showPattenAnalysisDiv-div1">
              <div @click="polygonDraw" class="new-pattenAnalysisDiv-button" :class="{ 'new-div-selected': polygonDrawBool==true }">
                <img title="多边形" src="@/assets/map/image/newImage/icon-polygon.png"><br/><span>多边形</span>
              </div>
              <div @click="circleDraw" class="new-pattenAnalysisDiv-button" :class="{ 'new-div-selected': circleDrawBool==true }">
                <img title="圆形" src="@/assets/map/image/newImage/icon-circle.png"><br/><span>圆形</span>
              </div>
            </div>
            <div @click="xzqhSelect" class="new-pattenAnalysisDiv-button" :class="{ 'new-div-selected': openArea==true }">
              <img title="行政区划选择" src="@/assets/map/image/newImage/icon-district.png"><br/><span>行政区划</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 行政区域选择 -->
      <XzqhSelect :open="openArea" :selectDistrict="selectDistrict" @close="closeXzqhSelect"
                  @getSelectXzqhGeom="getSelectXzqhGeom" @getSelectDistrict="getSelectDistrict"></XzqhSelect>
      <!--版本选择面板-->
      <VersionDialog v-if="openDialog"
                     :open="openDialog" :type="dialogType" :geom="countParam.geomText"
                     @closeDialog="closeDialog" @selectVersionData="selectVersionData"
      ></VersionDialog>
      <!--设置选择数据面板-->
      <div class="new-settingDiv" v-show="showSettingDivBool">
        <div class="new-settingDiv-div1" v-if="props.dataType=='earthquakeIntensityRelation'">
          <el-radio-group v-model="countParam.tab1" @change="changeRadio">
            <p class="new-p"><el-radio label="1">中国地震综合等震线</el-radio>
              <span v-if="countParam.tab1=='1' && countParam.param1" @click="showSelectDialog('中国地震综合等震线')" class="new-settingDiv-span">{{countParam.param1}}</span>
              <el-button v-else @click="showSelectDialog('中国地震综合等震线')" :disabled="countParam.tab1=='2'">选择</el-button>
            </p>
            <p><el-radio label="2">历史地震等震线</el-radio>
              <el-select v-if="countParam.tab1=='1'" v-model="dzxValue" placeholder="请选择" :disabled="countParam.tab1=='1'">
              </el-select>
              <el-select v-if="countParam.tab1=='2'" v-model="countParam.param1" placeholder="请选择" :disabled="countParam.tab1=='1'" @change="changeDzxValue">
                <el-option v-for="item in dzxList"
                           :key="item.jedsId"
                           :label="item.eventAbbreviation"
                           :value="item.jedsId"
                />
              </el-select>
            </p>
          </el-radio-group>
        </div>
        <div class="new-settingDiv-div1" v-if="props.dataType=='seismogenicFaultDistanceRelation'">
          <p class="new-p">活断层数据
            <span v-if="countParam.param1" class="new-settingDiv-span" @click="showSelectDialog('活断层数据')">{{countParam.param1}}</span>
            <el-button v-else @click="showSelectDialog('活断层数据')">选择</el-button>
          </p>
        </div>
        <div class="new-settingDiv-div1" v-if="props.dataType=='elevationRelation'">
          <p class="new-p">高程数据
            <span v-if="countParam.param1" class="new-settingDiv-span" @click="showSelectDialog('高程数据')">{{countParam.param1}}</span>
            <el-button v-else @click="showSelectDialog('高程数据')">选择</el-button>
          </p>
        </div>
        <div class="new-settingDiv-div1" v-if="props.dataType=='terrainSlopeRelation'">
          <p class="new-p">坡度数据
            <span v-if="countParam.param1" class="new-settingDiv-span" @click="showSelectDialog('坡度数据')">{{countParam.param1}}</span>
            <el-button v-else @click="showSelectDialog('坡度数据')">选择</el-button>
          </p>
        </div>
        <div class="new-settingDiv-div1" v-if="props.dataType=='slopeAspectRelation'">
          <p class="new-p">坡向数据
            <span v-if="countParam.param1" class="new-settingDiv-span" @click="showSelectDialog('坡向数据')">{{countParam.param1}}</span>
            <el-button v-else @click="showSelectDialog('坡向数据')">选择</el-button>
          </p>
        </div>
        <div class="new-settingDiv-div1" v-if="props.dataType=='stratumLithologyRelation'">
          <p class="new-p">地层岩性数据
            <span v-if="countParam.param1" class="new-settingDiv-span" @click="showSelectDialog('地层岩性数据')">{{countParam.param1}}</span>
            <el-button v-else @click="showSelectDialog('地层岩性数据')">选择</el-button>
          </p>
        </div>
        <div class="new-settingDiv-div2">
          <p class="new-p"><el-checkbox v-model="check1" label="滑坡现场调查数据" @change="changeCheck1" />
            <span v-if="countParam.param2" class="new-settingDiv-span"  @click="showSelectDialog('滑坡现场调查数据')">{{countParam.param2}}</span>
            <el-button v-else @click="showSelectDialog('滑坡现场调查数据')" :disabled="check1==false">选择</el-button>
          </p>
          <p class="new-p"><el-checkbox v-model="check2" label="滑坡遥感影像解译数据" @change="changeCheck2" />
            <span v-if="countParam.param3" class="new-settingDiv-span"  @click="showSelectDialog('滑坡遥感影像解译数据')">{{countParam.param3}}</span>
            <el-button v-else @click="showSelectDialog('滑坡遥感影像解译数据')" :disabled="check2==false">选择</el-button>
          </p>
        </div>
        <div class="new-settingDiv-div3">
          <el-button @click="handleCount" type="primary">计算</el-button>
          <el-button v-show="result.dspId!=null && result.dspId!=''" @click="showResultDialogBool=true" type="primary">结果</el-button>
          <el-button @click="showSettingDivBool=false" type="primary">关闭</el-button>
        </div>
      </div>
      <!--计算结果按钮-->
      <!--<div class="resultShowButton">
        <el-button @click="showResultDialogBool=true" type="primary">结果</el-button>
      </div>-->
      <!--计算结果展示窗口-->
      <ResultDialog v-if="showResultDialogBool" :open="showResultDialogBool" :result="result"
                    @closeResultDialog="closeResultDialog"
      ></ResultDialog>
      <!--生成图件-->
      <PrintMap v-if="showImgcreateBool"
                :open="showImgcreateBool" :geom="countParam.geomText"
                :mapLevel1Category="result.mapLevel1Category" :mapLevel2Category="result.mapLevel2Category"
                :legendSetList="result.legendSetList" :tempLayersSetList="result.tempLayersSetList"
                @closeImgDialog="closeImgDialog"
      ></PrintMap>
    </div>
  </div>
</template>

<script setup>
//地图
import DpaIndexMap from '@/map/slideAssess/distributionPatternAnalysis/indexMap.vue';
import ControlToolBar from '@/map/components/controlToolBar/map.vue';
import SuperMapLayer from '@/map/components/superMapLayer/index.vue';
import XzqhSelect from '@/map/slideAssess/distributionPatternAnalysis/xzqhSelect.vue';
import VersionDialog from '@/map/slideAssess/distributionPatternAnalysis/versionDialog.vue';
import ResultDialog from '@/map/slideAssess/distributionPatternAnalysis/resultDialog.vue';
import PrintMap from '@/map/slideAssess/distributionPatternAnalysis/printMap.vue';
import {getAreaTree,getDistrictBoundary} from "@/api/taskmanage/sceneExame"
import { getProvinces, getYear, getDistrict } from "@/utils/group.js";
import { getJcEarthquakeDamageSurvey,count1,count2,count3,count4,count5,count6,count7,getDataByType } from "@/api/slideAssess/distributionPatternAnalysis/indexMap";
import { ElMessageBox } from 'element-plus'

const { proxy } = getCurrentInstance();
const router = useRouter();
const props = defineProps(['dataType']);
const loading = ref(false);
const loadingText = ref('');
const pageType = ref("分布规律分析页面");
const showSettingDivBool = ref(true);//是否显示选择数据设置面板
//与地震烈度的关系
const dzxValue = ref("");//历史地震等震线临时数据
const dzxList = ref([]);//历史地震等震线下拉框数据列表
const check1 = ref(false);//滑坡现场调查数据
const check2 = ref(false);//滑坡遥感影像解译数据
//行政区划选择面板
const openArea = ref(false);
//数据选择面板
const openDialog = ref(false);
//数据选择类型
const dialogType = ref("");
//是否显示计算结果弹窗
const showResultDialogBool = ref(false);
//计算结果弹窗类型
const resultDialogType = ref("");
const resetClearAllBool = ref(false);//是否清空全部超图图层

const data = reactive({
  countParam:{//计算参数
    param1: "",//中国地震综合等震线、活断层数据、...、地层岩性数据等数据选择版本号、历史地震等震线ID
    param2: "",//滑坡现场调查数据选择版本号
    param3: "",//滑坡遥感影像解译数据选择版本号
    tab1:"1",//1中国地震综合等震线 2历史地震等震线
    geomText:"",//空间数据
  },
  result:{
    resultDialogType:"",//计算结果弹窗类型
    resultDataList:[],//计算结果数据列表
    resultLegendList:[],//计算结果图例列表
    resultLegendHtml:[],//计算结果图例内容
    dspId:"",
    type:"",
    completeBool:false,//是否完成计算
    level2DataType:"",//数据类别二级code
    level3DataType:"",//数据类别三级code
    isYw:false,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
    resultLevel3DataType:"",//计算结果数据类别三级code
    mapLevel1Category:"",//一级图件分类
    mapLevel2Category:"",//二级图件分类
    legendSetList:[],//图层（临时图层）url列表--用于显示图例
    tempLayersSetList:[],//图层（临时图层）url列表--用于显示图层
  },
  //图层数据类别code和版本号显示列表
  layerDataTypeList:[{
    //中国地震综合等震线、活断层数据、...、地层岩性数据等数据
    level2DataType:"",//数据类别二级code
    level3DataType:"",//数据类别三级code
    versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
    show:false,//是否显示
    isYw:false,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  },{
    //滑坡现场调查
    level2DataType:"landslidexc",//数据类别二级code
    level3DataType:"hpxcdc",//数据类别三级code
    versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
    show:false,//是否显示
    isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  },{
    //滑坡遥感影像
    level2DataType:"landslide",//数据类别二级code
    level3DataType:"hpygyx",//数据类别三级code
    versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
    show:false,//是否显示
    isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  },{
    //地震滑坡分布规律分析计算结果
    level2DataType:"sloperesult",//数据类别二级code
    level3DataType:"",//数据类别三级code
    versionCode:null,//计算结果dsp_id
    show:false,//是否显示
    isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  }]
});

let {
  countParam,result,layerDataTypeList
} = toRefs(data);

const rules = reactive({
  taskDistrict: [{
    required: true,
    message: "请选择地区",
    trigger: "change"
  }],
});

/*地图传参start*/
const completeRefreshData = ref(false);//防止刷新后地图不显示
//地图对象
const map = ref(null);
const getMap = (obj)=>{
  map.value = obj;
}
const showPattenAnalysisBool = ref(false);
const showPattenAnalysis = (val) =>{
  showPattenAnalysisBool.value = val;
}
const showImgcreateBool = ref(false);
const showImgcreate = (val) =>{
  showImgcreateBool.value = val;
  if(val){
    showHideButtonType.value = "ShowPrintImg";
  }else{
    showHideButtonType.value = "ClosePrintImg";
  }
}
const mapDrawType = ref("");//是否开启地图圈选查询类型（StopDraw关闭地图圈选 Polygon多边形绘制 Circle圆形绘制 Clear清空）
const polygonDrawBool = ref(false);
const polygonDraw = () =>{
  if(polygonDrawBool.value){
    polygonDrawBool.value = false;
    mapDrawType.value = "StopDraw";
  }else{
    clearResultData("Polygon");
  }
}
const circleDrawBool = ref(false);
const circleDraw = () =>{
  if(circleDrawBool.value){
    circleDrawBool.value = false;
    mapDrawType.value = "StopDraw";
  }else{
    clearResultData("Circle");
  }
}
//关闭其他打开的按钮
const closeSelectButton = () =>{
  if(polygonDrawBool.value){
    polygonDrawBool.value = false;
    mapDrawType.value = "StopDraw";
  }
  if(circleDrawBool.value){
    circleDrawBool.value = false;
    mapDrawType.value = "StopDraw";
  }
  if(openArea.value){
    openArea.value = false;
  }
}

//是否清空规律分析计算结果
const clearResultData = (type) =>{
  //判断是否已有数据
  let resultDataList = result.value.resultDataList;//计算结果数据列表
  if(resultDataList && resultDataList.length>0){
    proxy.$modal.confirm('是否清空规律分析计算结果并重新设置规律分析区域？').then(function () {
      //重置图层数据类别code和版本号显示列表
      resetLayerDataTypeList(true);
      closeSelectButton();
      if(type=="Polygon"){
        polygonDrawBool.value = true;
        mapDrawType.value = "Polygon";
      }else if(type=="Circle"){
        circleDrawBool.value = true;
        mapDrawType.value = "Circle";
      }else if(type=="Xzqh"){
        openArea.value = true;
      }
    });
  }else{
    closeSelectButton();
    if(type=="Polygon"){
      polygonDrawBool.value = true;
      mapDrawType.value = "Polygon";
    }else if(type=="Circle"){
      circleDrawBool.value = true;
      mapDrawType.value = "Circle";
    }else if(type=="Xzqh"){
      openArea.value = true;
    }
  }
}

//全部地图绘制空间数据
const allDrawGeomText = ref("");
//全部行政区划选择空间数据
const allXzqhGeomText = ref("");
//获取全部地图绘制结果
const getAllDrawGeom = (list) =>{
  //判断是否已有数据
  let resultDataList = result.value.resultDataList;//计算结果数据列表
  if(resultDataList && resultDataList.length>0){
    showSettingDivBool.value = true;//是否显示选择数据设置面板
  }else{
    //关闭其他打开的按钮
    closeSelectButton();
    let geom = "";
    if(list && list.length>0){
      geom = "MULTIPOLYGON(";
      for(let i=0;i<list.length;i++){
        if(i>0){
          geom += ",";
        }
        geom += list[i].split("POLYGON")[1];
      }
      geom += ")";
    }
    console.log("获取全部地图绘制结果");
    console.log(geom);
    if(geom=="MULTIPOLYGON()"){
      geom = "";
    }
    allDrawGeomText.value = geom;//全部地图绘制空间数据
    //设置计算空间数据
    setCountGeomText();
    showSettingDivBool.value = true;//是否显示选择数据设置面板
  }
}
const xzqhSelect = () => { //行政区划选择区域
  if(openArea.value){
    openArea.value = false;
  }else{
    clearResultData("Xzqh");
  }
}
//行政区划选择区域
const selectDistrict = ref("");
//获取行政区划选择区域
const getSelectDistrict = (val) => {
  selectDistrict.value = val;//行政区划选择区域
}
//获取行政区划选择区域空间数据
const getSelectXzqhGeom = (list) => {
  let geom = "";
  if(list && list.length>0){
    geom = "MULTIPOLYGON(";
    for(let i=0;i<list.length;i++){
      if(i>0){
        geom += ",";
      }
      if(list[i].indexOf("MULTIPOLYGON (")==0){
        geom += list[i].split("MULTIPOLYGON (")[1].slice(0,-1);
      }
    }
    geom += ")";
  }
  console.log("获取行政区划选择区域空间数据");
  console.log(geom);
  if(geom=="MULTIPOLYGON()"){
    geom = "";
  }
  allXzqhGeomText.value = geom;//全部行政区划选择空间数据
  //设置计算空间数据
  setCountGeomText();
}
//设置计算空间数据
function setCountGeomText(){
  let geom = "";
  let list = [];
  let drawGeomText = allDrawGeomText.value;//全部地图绘制空间数据
  let xzqhGeomText = allXzqhGeomText.value;//全部行政区划选择空间数据
  if(drawGeomText){
    list.push(drawGeomText);
  }
  if(xzqhGeomText){
    list.push(xzqhGeomText);
  }
  if(list && list.length>0){
    geom = "MULTIPOLYGON(";
    for(let i=0;i<list.length;i++){
      if(i>0){
        geom += ",";
      }
      if(list[i].indexOf("MULTIPOLYGON(")==0){
        geom += list[i].split("MULTIPOLYGON(")[1].slice(0,-1);
      }
    }
    geom += ")";
  }
  console.log(list);
  console.log("设置计算空间数据");
  console.log(geom);
  countParam.value.geomText = geom;//设置空间数据
}
//点击地图经纬度
const clickLonLat = ref([]);
//传递点击地图经纬度
const getClickLonLat = (lonlat) =>{
  clickLonLat.value = lonlat;
}
//获取全部图层信息列表
const getAllTempLayersSetList = (obj)=>{
  console.log("getAllTempLayersSetList");
  if(obj) {
    let list = obj.list;
    console.log(list);
    if(list && list.length>0){
      result.value.tempLayersSetList = list;//图层（临时图层）url列表--用于显示图层
      result.value.legendSetList = list;//图层（临时图层）url列表--用于显示图例
    }
  }
}
/*地图传参end*/
const closeXzqhSelect = (val)=>{
  if(val){
    openArea.value = false;
  }
}

//显示数据选择面板
const showSelectDialog = (type) =>{
  if(countParam.value.geomText){
    dialogType.value = type;
    openDialog.value = true;
  }else{
    proxy.$modal.msgWarning("请设置规律分析区域");
  }
}
const closeDialog = (val)=>{
  if(val){
    openDialog.value = false;
  }
}
//选择版本数据
const selectVersionData = (obj)=>{
  if(obj){
    let versionCode = obj.versionCode;
    let type = obj.type;
    let attachName = obj.attachName;
    if(type=="滑坡现场调查数据"){
      countParam.value.param2 = versionCode;
      //根据参数设置图层数据类别code和版本号显示列表
      setLayerDataTypeListByParams(false);
      /*if(countParam.value.param2){
        countParam.value.param2 = versionCode;
        countParam.value.param2 = "";//清空选择版本号
        //根据参数设置图层数据类别code和版本号显示列表
        setLayerDataTypeListByParams(false);
        nextTick(() => {
          countParam.value.param2 = versionCode;
          //根据参数设置图层数据类别code和版本号显示列表
          setLayerDataTypeListByParams(false);
        });
      }else{
        countParam.value.param2 = versionCode;
        //根据参数设置图层数据类别code和版本号显示列表
        setLayerDataTypeListByParams(false);
      }*/
    }else if(type=="滑坡遥感影像解译数据"){
      countParam.value.param3 = versionCode;
      //根据参数设置图层数据类别code和版本号显示列表
      setLayerDataTypeListByParams(false);
      /*if(countParam.value.param3){
        countParam.value.param3 = versionCode;
        countParam.value.param3 = "";//清空选择版本号
        //根据参数设置图层数据类别code和版本号显示列表
        setLayerDataTypeListByParams(false);
        nextTick(() => {
          countParam.value.param3 = versionCode;
          //根据参数设置图层数据类别code和版本号显示列表
          setLayerDataTypeListByParams(false);
        });
      }else{
        countParam.value.param3 = versionCode;
        //根据参数设置图层数据类别code和版本号显示列表
        setLayerDataTypeListByParams(false);
      }*/
    }else{//中国地震综合等震线、活断层数据、...、地层岩性数据等数据
      countParam.value.param1 = versionCode;
      if(attachName && attachName.indexOf(".tif")!=-1){
        result.value.tifFileName = attachName.split(".tif")[0];//tif文件图层名称
      }
      //根据参数设置图层数据类别code和版本号显示列表
      setLayerDataTypeListByParams(false);
      /*if(countParam.value.param1){
        countParam.value.param1 = "";//清空选择版本号
        //根据参数设置图层数据类别code和版本号显示列表
        setLayerDataTypeListByParams(false);
        nextTick(() => {
          countParam.value.param1 = versionCode;
          //根据参数设置图层数据类别code和版本号显示列表
          setLayerDataTypeListByParams(false);
        });
      }else{
        countParam.value.param1 = versionCode;
        //根据参数设置图层数据类别code和版本号显示列表
        setLayerDataTypeListByParams(false);
      }*/
    }
  }
}

//校验数据
function checkCountParam(){
  let bool = true;
  let param1 = countParam.value.param1;
  let param2 = countParam.value.param2;
  let param3 = countParam.value.param3;
  if(param1){
    //已选择版本号
  }else{
    if(props.dataType=="riverSystemRelation"){
      //水系不需要版本号
    }else{
      bool = false;
    }
  }
  if(param2){
    //已选择版本号
  }else{
    if(param3){
      //已选择版本号
    }else{
      bool = false;
    }
  }
  if(bool){
    if(countParam.value.geomText){
      //已地图圈选/行政区划选择区域
    }else{
      bool = false;
      proxy.$modal.msgWarning("请设置规律分析区域");
    }
  }else{
    proxy.$modal.msgWarning("请选择版本");
  }

  return bool;
}

//计算
const handleCount = ()=>{
  let bool = checkCountParam();
  if(bool==false){
    return;
  }
  //重置图层数据类别code和版本号显示列表
  resetLayerDataTypeList(false);
  loading.value = true;
  loadingText.value = '计算中，请稍后查看计算结果。'
  let dataType = props.dataType;
  if(dataType=="earthquakeIntensityRelation"){
    //计算与地震烈度的关系
    count1(countParam.value).then(response => {
      loading.value = false;
      countSuccess("dzzh_slide_result_intensity");//计算成功
    }).catch(() => {
      // proxy.$modal.msgError("计算失败");
      loading.value = false;
    });
  }else if(dataType=="seismogenicFaultDistanceRelation"){
    //计算与距断层距离的关系
    count2(countParam.value).then(response => {
      loading.value = false;
      countSuccess("dzzh_slide_result_fault");//计算成功
    }).catch((err) => {
      // proxy.$modal.msgError("计算失败");
      loading.value = false;
      // ElMessageBox.alert(err.message, '消息提示', {
      //   confirmButtonText: '确认',
      //   type: 'error',
      // })
    });
  }else if(dataType=="elevationRelation"){
    //计算与高程的关系
    count3(countParam.value).then(response => {
      loading.value = false;
      countSuccess("dzzh_slide_result_tera");//计算成功
    }).catch(() => {
      // proxy.$modal.msgError("计算失败");
      loading.value = false;
    });
  }else if(dataType=="terrainSlopeRelation"){
    //计算与地形坡度的关系
    count4(countParam.value).then(response => {
      loading.value = false;
      countSuccess("dzzh_slide_result_slope");//计算成功
    }).catch(() => {
      // proxy.$modal.msgError("计算失败");
      loading.value = false;
    });
  }else if(dataType=="slopeAspectRelation"){
    //计算与坡向的关系
    count5(countParam.value).then(response => {
      loading.value = false;
      countSuccess("dzzh_slide_result_aspect");//计算成功
    }).catch(() => {
      // proxy.$modal.msgError("计算失败");
      loading.value = false;
    });
  }else if(dataType=="riverSystemRelation"){
    //计算与水系的关系
    count6(countParam.value).then(response => {
      loading.value = false;
      countSuccess("dzzh_slide_result_drainage");//计算成功
    }).catch(() => {
      // proxy.$modal.msgError("计算失败");
      loading.value = false;
    });
  }else if(dataType=="stratumLithologyRelation"){
    //计算与地层岩性的关系
    count7(countParam.value).then(response => {
      loading.value = false;
      countSuccess("dzzh_slide_result_lithology");//计算成功
    }).catch(() => {
      // proxy.$modal.msgError("计算失败");
      loading.value = false;
    });
  }
}

//计算成功
function countSuccess(dataset){
  proxy.$modal.msgSuccess("计算成功");
  //获取用户上传计算结果保存的参数
  getLastDataByType(props.dataType);
  //开启选择
  mapDrawType.value = "Select";
  result.value.completeBool = true;
}

//单选切换事件
const changeRadio = (val)=>{
  if(val=="1"){//中国地震综合等震线
    countParam.value.param1 = "";//清空历史地震等震线ID
  }else if(val=="2"){//历史地震等震线
    countParam.value.param1 = "";//清空选择版本号
  }
  resetClearAllBool.value = true;//是否清空全部超图图层
  //根据参数设置图层数据类别code和版本号显示列表
  setLayerDataTypeListByParams(false);
}

//切换历史地震等震线下拉框选中数据
const changeDzxValue = (val)=>{
  if(countParam.value.tab1=="2"){
    countParam.value.param1 = val;//历史地震等震线ID
    //根据参数设置图层数据类别code和版本号显示列表
    setLayerDataTypeListByParams(false);
  }
}

//滑坡现场调查数据是否勾选事件
const changeCheck1 = (val)=>{
  if(val){
    //勾选
  }else{
    countParam.value.param2 = "";//清空选择版本号
    //根据参数设置图层数据类别code和版本号显示列表
    setLayerDataTypeListByParams(false);
  }
}
//滑坡遥感影像解译数据是否勾选事件
const changeCheck2 = (val)=>{
  if(val){
    //勾选
  }else{
    countParam.value.param3 = "";//清空选择版本号
    //根据参数设置图层数据类别code和版本号显示列表
    setLayerDataTypeListByParams(false);
  }
}

//获取历史地震等震线列表
function getDzxList(){
  getJcEarthquakeDamageSurvey().then(response => {
    console.log("获取历史地震等震线列表");
    console.log(response);
    dzxList.value = response.data;
  }).catch(() => {
    // proxy.$modal.msgError("查询失败");
  });
}

//获取用户上传计算结果保存的参数
function getLastDataByType(dataType){
  loading.value = true;
  let tab = null;
  if(dataType=="earthquakeIntensityRelation"){
    //与地震烈度的关系
    tab = "1";
    result.value.resultLegendList = [
      // {name:"Ⅴ",value:"Ⅴ",color:"rgba(255,230,230,0.8)"},
      {name:"Ⅵ",value:"Ⅵ",color:"rgba(255,210,218,0.8)"},
      {name:"Ⅶ",value:"Ⅶ",color:"rgba(255,190,190,0.8)"},
      {name:"Ⅷ",value:"Ⅷ",color:"rgba(255,127,127,0.8)"},
      {name:"Ⅸ",value:"Ⅸ",color:"rgba(200,40,40,0.8)"},
      {name:"Ⅹ",value:"Ⅹ",color:"rgba(168,0,0,0.8)"},
      {name:"Ⅺ",value:"Ⅺ",color:"rgba(140,0,0,0.8)"},
      // {name:"Ⅻ",value:"Ⅻ",color:"rgba(100,0,0,0.8)"},
    ];//烈度。5Ⅴ、6 Ⅵ、7 Ⅶ、8 Ⅷ、9 Ⅸ、10 Ⅹ、11 Ⅺ、12 Ⅻ
    //设置计算结果图例内容
    setResultLegendHtml("地震烈度");
    result.value.resultDialogType = "与地震烈度的关系";
    result.value.resultLevel3DataType = "dldzz";//计算结果数据类别三级code
    //地震综合等震线
    result.value.level2DataType = "dzzhdzx";//数据类别二级code
    result.value.level3DataType = "dzzhdzx1";//数据类别三级code
    result.value.isYw = false;//是否为业务系统数据，true业务系统，false基础数据系统
    result.value.mapLevel1Category = "10";//一级图件分类
    result.value.mapLevel2Category = "24";//二级图件分类
  }else if(dataType=="seismogenicFaultDistanceRelation"){
    //与距断层距离的关系
    tab = "2";
    result.value.resultLegendList = [
        {name:"0~5",value:"1",color:"rgba(255,0,0,0.7)"},
        {name:"5~10",value:"2",color:"rgba(255,100,0,0.7)"},
        {name:"10~15",value:"3",color:"rgba(255,255,0,0.7)"},
        {name:"15~20",value:"4",color:"rgba(0,255,0,0.7)"},
        {name:"20~25",value:"5",color:"rgba(0,255,255,0.7)"},
        {name:"25~30",value:"6",color:"rgba(0,0,255,0.7)"},
        {name:">30",value:"7",color:"rgba(255,0,255,0.7)"}
    ];//距断层的距离。7,>30;6,25~30;5,20~25;4,15~20;3,10~15;2,5~10;1,0~5
    //设置计算结果图例内容
    setResultLegendHtml("距断层距离（km）");
    result.value.resultDialogType = "与距断层距离的关系";
    result.value.resultLevel3DataType = "djdz";//计算结果数据类别三级code
    //断层
    result.value.level2DataType = "hdc";//数据类别二级code
    result.value.level3DataType = "dc";//数据类别三级code
    result.value.isYw = false;//是否为业务系统数据，true业务系统，false基础数据系统
    result.value.mapLevel1Category = "10";//一级图件分类
    result.value.mapLevel2Category = "25";//二级图件分类
  }else if(dataType=="elevationRelation"){
    //与高程的关系
    tab = "3";
    result.value.resultLegendList = [
      {name:"<0.6",value:"1",color:"rgba(255,0,0,0.7)"},
      {name:"0.6~1.0",value:"2",color:"rgba(255,100,0,0.7)"},
      {name:"1.0~1.5",value:"3",color:"rgba(255,255,0,0.7)"},
      {name:"1.5~2.0",value:"4",color:"rgba(0,255,0,0.7)"},
      {name:"2.0~2.5",value:"5",color:"rgba(0,255,255,0.7)"},
      {name:"2.5~3.0",value:"6",color:"rgba(0,0,255,0.7)"},
      {name:"3.0~3.5",value:"7",color:"rgba(255,0,255,0.7)"},
      {name:">3.5",value:"8",color:"rgba(255,0,200,0.7)"}
    ];//高程。1,<0.6;2,0.6~1;3,1~1.5;4,1.5~2;5,2~2.5;6,2.5~3;7,3~3.5;8,>3.5
    //设置计算结果图例内容
    setResultLegendHtml("海拔高程（km）");
    result.value.resultDialogType = "与高程的关系";
    result.value.resultLevel3DataType = "dgdz";//计算结果数据类别三级code
    //高程
    result.value.level2DataType = "demgc";//数据类别二级code
    result.value.level3DataType = "demgcsj";//数据类别三级code
    result.value.isYw = false;//是否为业务系统数据，true业务系统，false基础数据系统
    result.value.mapLevel1Category = "10";//一级图件分类
    result.value.mapLevel2Category = "26";//二级图件分类
  }else if(dataType=="terrainSlopeRelation"){
    //与地形坡度的关系
    tab = "4";
    result.value.resultLegendList = [
      {name:"<15",value:"1",color:"rgba(255,0,0,0.7)"},
      {name:"15~25",value:"2",color:"rgba(255,100,0,0.7)"},
      {name:"25~35",value:"3",color:"rgba(255,255,0,0.7)"},
      {name:"35~45",value:"4",color:"rgba(0,255,0,0.7)"},
      {name:"45~55",value:"5",color:"rgba(0,255,255,0.7)"},
      {name:">55",value:"6",color:"rgba(0,0,255,0.7)"},
    ];//坡度。1,<15;2,15~25;3,25~35;4,35~45;5,45~55;6,>55
    //设置计算结果图例内容
    setResultLegendHtml("地形坡度（°）");
    result.value.resultDialogType = "与地形坡度的关系";
    result.value.resultLevel3DataType = "dpdz";//计算结果数据类别三级code
    //坡度
    result.value.level2DataType = "dxdmsj";//数据类别二级code
    result.value.level3DataType = "dxdmpd";//数据类别三级code
    result.value.isYw = true;//是否为业务系统数据，true业务系统，false基础数据系统
    result.value.mapLevel1Category = "10";//一级图件分类
    result.value.mapLevel2Category = "27";//二级图件分类
  }else if(dataType=="slopeAspectRelation"){
    //与坡向的关系
    tab = "5";
    result.value.resultLegendList = [
      {name:"北",value:"1",color:"rgba(255,0,0,0.7)"},
      {name:"北东",value:"2",color:"rgba(255,100,0,0.7)"},
      {name:"东",value:"3",color:"rgba(255,255,0,0.7)"},
      {name:"南东",value:"4",color:"rgba(0,255,0,0.7)"},
      {name:"南",value:"5",color:"rgba(0,255,255,0.7)"},
      {name:"南西",value:"6",color:"rgba(0,0,255,0.7)"},
      {name:"西",value:"7",color:"rgba(255,0,255,0.7)"},
      {name:"北西",value:"8",color:"rgba(255,0,200,0.7)"}
    ];//坡向1,N;2,NE;3,E;4,ES;5,S;6,SW;7,W;8,WN
    //设置计算结果图例内容
    setResultLegendHtml("坡向");
    result.value.resultDialogType = "与坡向的关系";
    result.value.resultLevel3DataType = "pdz";//计算结果数据类别三级code
    //坡向
    result.value.level2DataType = "dxdmsj";//数据类别二级code
    result.value.level3DataType = "dxdmpx";//数据类别三级code
    result.value.isYw = true;//是否为业务系统数据，true业务系统，false基础数据系统
    result.value.mapLevel1Category = "10";//一级图件分类
    result.value.mapLevel2Category = "28";//二级图件分类
  }else if(dataType=="riverSystemRelation"){
    //与水系的关系
    tab = "6";
    result.value.resultLegendList = [
      {name:"0~500",value:"1",color:"rgba(255,0,0,0.7)"},
      {name:"500~1000",value:"2",color:"rgba(255,100,0,0.7)"},
      {name:"1000~1500",value:"3",color:"rgba(255,255,0,0.7)"},
      {name:"1500~2000",value:"4",color:"rgba(0,255,0,0.7)"},
      {name:">2000",value:"5",color:"rgba(0,255,255,0.7)"}
    ];//距水系距离。1,0~500;2,500~1000;3,1000~1500;4,1500~2000;5,>2000
    //设置计算结果图例内容
    setResultLegendHtml("距水系距离（m）");
    result.value.resultDialogType = "与水系的关系";
    result.value.resultLevel3DataType = "wjdz";//计算结果数据类别三级code
    //水系线
    result.value.level2DataType = "sx";//数据类别二级code
    result.value.level3DataType = "sxx";//数据类别三级code
    result.value.isYw = false;//是否为业务系统数据，true业务系统，false基础数据系统
    result.value.mapLevel1Category = "10";//一级图件分类
    result.value.mapLevel2Category = "29";//二级图件分类
  }else if(dataType=="stratumLithologyRelation"){
    //与地层岩性的关系
    tab = "7";
    result.value.resultLegendList = [
      // {name:"石英闪长岩",value:"δο",color:"rgba(255,0,0,0.7)"},
    ];//地层岩性。
    //设置计算结果图例内容
    // setResultLegendHtml("地层岩性");
    result.value.resultDialogType = "与地层岩性的关系";
    result.value.resultLevel3DataType = "dydz";//计算结果数据类别三级code
    //地层岩性
    result.value.level2DataType = "dcyx";//数据类别二级code
    result.value.level3DataType = "dcyx1";//数据类别三级code
    result.value.isYw = false;//是否为业务系统数据，true业务系统，false基础数据系统
    result.value.mapLevel1Category = "10";//一级图件分类
    result.value.mapLevel2Category = "30";//二级图件分类
  }
  if(tab){
    //查询参数及结果：1、与地震烈度2、与距断层距离3、与高程4、与地形坡度5、与坡向6、与水系7、与地层岩性
    getDataByType(tab).then(response => {
      console.log("获取用户上传计算结果保存的参数");
      console.log(response);
      let responseData = response.data;
      if(responseData){
        let dzzhSlideParam = responseData.dzzhSlideParam;
        if(dzzhSlideParam){
          countParam.value.param1 = dzzhSlideParam.param1;//参数1的版本号
          countParam.value.param2 = dzzhSlideParam.param2;//滑坡现场调查数据的版本号
          countParam.value.param3 = dzzhSlideParam.param3;//滑坡遥感影像解译数据的版本号
          countParam.value.tab1 = dzzhSlideParam.tab;//参数1的类型
          countParam.value.geomText = dzzhSlideParam.geom;//空间数据
          if(dzzhSlideParam.param2){
            check1.value = true;
          }
          if(dzzhSlideParam.param3){
            check2.value = true;
          }
          result.value.dspId = dzzhSlideParam.id;
          result.value.type = dzzhSlideParam.paramType;//1-7
          //根据参数设置图层数据类别code和版本号显示列表
          setLayerDataTypeListByParams(true);
        }
        let byDspId = responseData.byDspId;//计算结果数据列表
        if(byDspId!=null && byDspId.length>0){
          result.value.resultDataList = byDspId;
          if(dataType=="stratumLithologyRelation"){
            //与地层岩性的关系
            tab = "7";
            let legendList = [];
            for(let i=0;i<byDspId.length;i++){
              // {name:"δο",value:"δο",color:"rgba(255,0,0,0.7)"},
              let red = 255 - i * 10;
              if(i>25){
                red = 0;
              }
              let green = i * 10;
              if(i>25){
                green = 255;
              }
              let blue = i * 5;
              if(i>50){
                green = 255;
              }
              let color = "rgba("+red+","+green+","+blue+",0.7)";
              if(byDspId[i].lithologyRange){
                let obj = {
                  name:byDspId[i].lithologyName,//地层岩性名称
                  value:byDspId[i].lithologyRange,//地层岩性符号
                  color:color
                }
                legendList.push(obj);
              }
            }
            result.value.resultLegendList = legendList;//地层岩性
            //设置计算结果图例内容
            setResultLegendHtml("地层岩性");
          }
        }
        result.value.completeBool = true;
      }
      loading.value = false;
    }).catch(() => {
      // proxy.$modal.msgError("查询失败");
      loading.value = false;
    });
  }
}

//设置计算结果图例内容
function setResultLegendHtml(legendName){
  let html = "";
  let legends = result.value.resultLegendList;
  if(legends.length>=0){
    if(legends.length>1){//多图例图层
      html += '<p style="text-align: center;font-weight: bold;">'+legendName+'</p>';
      for(let i=0;i<legends.length;i++){
        let legend = legends[i];
        let label = legend.name;
        let color = legend.color;
        let width = 16;
        let height = 16;
        html += '<p style="height: '+height+'px;">';
        html += '<span style="position: relative;width:'+width+'px;height:'+height+'px;background:'+color+';border:1px solid gray;display: block;"></span>';
        html += '<span style="position: relative;top: -18px;left: 25px;font-size: 16px;">'+label+'</span>';
        html += '</p>';
      }
    }else{//单一图例图层
      let legend = legends[0];
      let label = legend.name;
      let color = legend.color;
      let width = 16;
      let height = 16;
      html += '<p style="height: '+height+'px;">';
      html += '<span style="position: relative;width:'+width+'px;height:'+height+'px;background:'+color+';border:1px solid gray;display: block;"></span>';
      html += '<span style="position: relative;top: -18px;left: 25px;font-size: 16px;">'+label+'</span>';
      html += '</p>';
    }
  }
  // result.value.resultLegendHtml = html;
}

//重置图层数据类别code和版本号显示列表
function resetLayerDataTypeList(bool){
  resetClearAllBool.value = true;//是否清空全部超图图层
  if(bool){//清空计算参数
    countParam.value.tab1 = "1";//1中国地震综合等震线 2历史地震等震线
    countParam.value.param1 = "";//参数1的版本号
    countParam.value.param2 = "";//滑坡现场调查数据的版本号
    countParam.value.param3 = "";//滑坡遥感影像解译数据的版本号
    countParam.value.geomText = "";//清空空间数据
    check1.value = false;
    check2.value = false;
    getSelectXzqhGeom(null);//清空行政区划选择
  }
  result.value.dspId = null;//清空计算结果ID
  result.value.resultDataList = [];//清空数据
  result.value.completeBool = false;
  //获取初始图层数据类别code和版本号显示数组
  let layerDataTypeArray = getInitLayerDataTypeArray();
  layerDataTypeList.value = layerDataTypeArray;
}

//获取初始图层数据类别code和版本号显示数组
function getInitLayerDataTypeArray(){
  let versionCode = null;
  if(result.value.level2DataType=="sx"){//水系（无版本）
    versionCode = "全部";
  }
  let layerDataTypeArray = [{
    //中国地震综合等震线、活断层数据、...、地层岩性数据等数据
    level2DataType:result.value.level2DataType,//数据类别二级code
    level3DataType:result.value.level3DataType,//数据类别三级code
    versionCode:versionCode,//版本号："全部"则展示整个图层，null无版本号不展示
    show:false,//是否显示
    isYw:result.value.isYw,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  },{
    //滑坡现场调查
    level2DataType:"landslidexc",//数据类别二级code
    level3DataType:"hpxcdc",//数据类别三级code
    versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
    show:false,//是否显示
    isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  },{
    //滑坡遥感影像
    level2DataType:"landslide",//数据类别二级code
    level3DataType:"hpygyx",//数据类别三级code
    versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
    show:false,//是否显示
    isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  },{
    //地震滑坡分布规律分析计算结果
    level2DataType:"sloperesult",//数据类别二级code
    level3DataType:"",//数据类别三级code
    versionCode:null,//计算结果dsp_id
    show:false,//是否显示
    isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    tifFileName:null,//tif文件名称
  }];

  return layerDataTypeArray;
}

//根据参数设置图层数据类别code和版本号显示列表
function setLayerDataTypeListByParams(bool){
  resetClearAllBool.value = false;//是否清空全部超图图层
  //获取初始图层数据类别code和版本号显示数组
  let layerDataTypeArray = layerDataTypeList.value;
  if(bool){//获取计算结果
    //获取初始图层数据类别code和版本号显示数组
    layerDataTypeArray = getInitLayerDataTypeArray();
  }
  if(result.value.level2DataType=="sx") {//水系(无版本)
    layerDataTypeArray[0].level2DataType = result.value.level2DataType;//数据类别二级code
    layerDataTypeArray[0].level3DataType = result.value.level3DataType;//数据类别三级code
    layerDataTypeArray[0].versionCode = "全部";//版本号："全部"则展示整个图层，null无版本号不展示
    layerDataTypeArray[0].show = true;//显示图层
    layerDataTypeArray[0].tifFileName = null;//tif文件名称
  }else if(countParam.value.param1){
    layerDataTypeArray[0].level2DataType = result.value.level2DataType;//数据类别二级code
    layerDataTypeArray[0].level3DataType = result.value.level3DataType;//数据类别三级code
    layerDataTypeArray[0].versionCode = countParam.value.param1;//参数1的版本号
    layerDataTypeArray[0].show = true;//显示图层
    layerDataTypeArray[0].isYw = result.value.isYw;
    layerDataTypeArray[0].tifFileName = result.value.tifFileName;//tif文件名称
    if(bool) {//获取计算结果
      //断层、水系显示超图图层
      if(result.value.resultDialogType=="与距断层距离的关系" || result.value.resultDialogType=="与水系的关系"){
        layerDataTypeArray[0].show = true;//显示图层
      }else{//不显示图层，只显示计算结果图层
        layerDataTypeArray[0].show = false;//隐藏图层
      }
    }
  }else{
    // layerDataTypeArray[0].versionCode = null;//参数1的版本号
    layerDataTypeArray[0].show = false;//移除图层
  }
  if(countParam.value.param2){
    layerDataTypeArray[1].versionCode = countParam.value.param2;//滑坡现场调查数据的版本号
    layerDataTypeArray[1].show = true;//显示图层
  }else{
    // layerDataTypeArray[1].versionCode = null;//滑坡现场调查数据的版本号
    layerDataTypeArray[1].show = false;//移除图层
  }
  if(countParam.value.param3){
    layerDataTypeArray[2].versionCode = countParam.value.param3;//滑坡遥感影像解译数据的版本号
    layerDataTypeArray[2].show = true;//显示图层
  }else{
    // layerDataTypeArray[2].versionCode = null;//滑坡遥感影像解译数据的版本号
    layerDataTypeArray[2].show = false;//移除图层
  }
  //计算结果ID
  if(result.value.dspId){
    layerDataTypeArray[3].level2DataType = "sloperesult";//计算结果数据类别二级code
    layerDataTypeArray[3].level3DataType = result.value.resultLevel3DataType;//计算结果数据类别三级code
    layerDataTypeArray[3].versionCode = result.value.dspId;//计算结果ID
    layerDataTypeArray[3].show = true;//显示图层
    layerDataTypeArray[3].tifFileName = null;//tif文件名称
  }
  layerDataTypeList.value = layerDataTypeArray;
  console.log("layerDataTypeArray");
  console.log(layerDataTypeArray);
}

//关闭计算结果展示窗口
const closeResultDialog = (bool)=>{
  showResultDialogBool.value = false;
}
const showHideButtonType = ref("");//显示隐藏按钮类型
//关闭生成图件窗口
const closeImgDialog = (bool)=>{
  showImgcreateBool.value = false;
  showHideButtonType.value = "ClosePrintImg";
}

//获取数据类型一级
const getDataType = watch(() => props.dataType, value => {// watch函数监听props.dataType
  if(value){
    if(value=="earthquakeIntensityRelation"){//与地震烈度的关系
      //获取历史地震等震线列表
      getDzxList();
    }
    //获取用户上传计算结果保存的参数
    getLastDataByType(value);
  }
},{immediate:true});

onMounted(() => {
  completeRefreshData.value = true;
})
</script>

<style scoped lang="scss">
.mapDiv {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

/*设置选择数据面板*/
.new-settingDiv {
  position:absolute;top:18px;left:110px;width:400px;padding:20px;padding-top: 10px;
  background:rgba(0,27,67,0.7);border-radius:4px;color:white;
}
.new-settingDiv-div1{
  padding-bottom: 10px;
  border-bottom: 1px dashed white;
}
.new-settingDiv .new-p{
  margin-bottom: 10px;
  font-size:14px;
}
.new-settingDiv-div3{
  text-align: center;
}
:deep(.new-settingDiv .el-radio){
  color:white;
}
:deep(.new-settingDiv .el-checkbox){
  color:white;
}
:deep(.new-settingDiv .new-p .el-button){
  position:absolute;right:20px;
}
:deep(.new-settingDiv .el-select){
  width:208px;
}
.new-settingDiv-span {
  float: right;
  line-height: 32px;
  cursor:pointer;
}
.new-settingDiv-span:hover {
  cursor:pointer;
}

/*带三角弹窗*/
.new-popover {
  position: absolute;
  top:0px;
  left:0px;
  padding:10px;
  background: rgba(0,27,67,0.8);
  color:white;
  z-index:100;
}
.new-triangle {
  position: absolute;
  top: 20px;
  left: -19px;
  overflow: hidden;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: dashed solid dashed dashed;
  border-color:transparent rgba(0,27,67,0.8) transparent transparent;
}

.new-pattenAnalysisDiv {
  position: absolute;top:246px;left:105px;font-size: 14px;
}

.new-pattenAnalysisDiv-button {
  float: left;
  width: 80px;
  text-align: center;
  padding: 5px;
  cursor:pointer;
}
/*规律分析按钮div*/
.showPattenAnalysisDiv{

}
.showPattenAnalysisDiv img {
  width:25px;
  border:1px dashed white;
}
.showPattenAnalysisDiv-div1 {
  display: inline-block;width:160px;border-bottom: 1px dashed white;padding-bottom: 10px;
}

.new-div-selected {
  background: rgba(16,124,229,0.5);
  border: 1px solid #707070;
}

.areaDialog {
  text-align: center;
  .close {
    text-align: right;
    .el-icon {
      color: #606266;
      padding: 20px 0;
      margin-right: 10px;
      right: 0px;
      font-size: 22px;
    }
  }
  width: 320px;
  position: absolute;
  top: 246px;
  left: 288px;
  background: rgba($color: #fff, $alpha: 0.9);
}

.resultShowButton {
  position:absolute;
  top:20px;
  right:20px;
  width:50px;
  height:50px;
}

</style>